<template>
  <div>
    <div style="display: flex; flex-direction: row">
      <q-element :schema="schema" />
      <q-property-edit />
    </div>
    <codemirror :value="JSON.stringify(schema, null, 2)" />
    <el-button @click="showRefs"> showRefs </el-button>
  </div>
</template>

<script>
import QPropertyEdit from "@/views/QPropertyEdit.vue";
import { findComponentByUUID } from "@/utils/index";

export default {
  components: {
    QPropertyEdit,
  },
  data() {
    return {
      schema: {
        uuid: "a1d96cfa-75fe-464c-8890-08540dcef316",
        xType: "q-container",
        context: { mode: "f" },
        class: "test-plus",
        style: {
          width: "1000px",
          height: "800px",
        },
        items: [
          {
            //context: { mode: "d" },
            uuid: "1",
            xType: "q-container",
            items: [
              {
                inheritContext:true,
                context: { mode1: "dfd21f" },
                uuid: "13",
                xType: "q-container",
                items: [],
              },
            ],
          },
          {
            //context: { mode: "d2" },
            uuid: "12",
            xType: "q-container",
            items: [],
          },
          {
            uuid: "66",
            xType: "q-button",
            text: "事件测试",
            click: "alert(a)",
          },
        ],
      },
    };
  },
  watch: {
    schema: {
      // eslint-disable-next-line no-unused-vars
      handler(val, oldVal) {
        console.log(val, "变化");
        //算一次map
        //做时空穿梭和属性修改时用
        let map = new Map();
        const visit = (node) => {
          if (!map.has(node.uuid)) {
            map.set(node.uuid, node);
          }
          if (node.items) {
            for (let item of node.items) {
              visit(item);
            }
          }
        };
        visit(this.schema);
        console.log(map, "平展过后的map");
        this.$store.dispatch("prop/setMap", { map: map });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    log(...p) {
      console.log(...p);
    },
    showRefs() {
      console.log(this.$refs, "$refs");
      console.log(findComponentByUUID("13", this), "13");
    },
  },
};
</script>
<style lang="scss">
// .canvas-group {
//   width: 100%;
//   flex: 1;
//   min-height: 600px;
//   border-width: 1px;
//   border-color: #ebeef5;
//   border-style: solid;
//   border-radius: 10px;
// }

//元素高亮区域
.element-rect {
  border-color: #409eff;
  border-style: solid;
  border-width: 1px;
}

//可拖拽区域
.list-group {
  //width: 100%;
  // min-height: 200px;
  // height: 100%;
  //display: flex;
  //flex: auto;
  // width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: dotted;
  border-color: red;
  padding: 5px;
}
</style>
